<script setup>
import { ref, reactive, getCurrentInstance, onMounted, watch, render } from "vue"

const instance = getCurrentInstance()
const _this = instance.appContext.config.globalProperties //vue3获取当前this

// 组件中使用，接收传参的
let propsData = defineProps({
  searchForm: Object,
  selectVehicle: {
    type: Array,
    default: []
  },
  selectClassification: {
    type: Array,
    default: []
  },
})
// 组件中使用，接收事件的
const emits = defineEmits(['onSearch', 'vehicleChange']);

const onSubmit = () => {
  emits('onSearch') 
}
const onVehicle = () => {
  emits('vehicleChange')
}
</script>

<template>
  <el-form :inline="true" :model="searchForm" class="form_search_table">
    <el-form-item label="Classification">
      <el-select class="value_input" @change="onVehicle" v-model="searchForm.type" placeholder="Please select" filterable clearable>
        <el-option v-for="item in selectClassification" :key="item.id" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="Vehicle">
      <el-select
        v-model="searchForm.ambulanceId"
        @change="onSubmit"
        placeholder="Please Select"
        filterable
      >
        <el-option v-for="item in selectVehicle" :key="item.id" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <!-- <el-form-item label="Type">
      <el-select
        v-model="searchForm.camear"
        placeholder="Day"
        clearable
      >
        <el-option v-for="item in cameraOptions" :key="item.id" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item> -->
    <el-form-item label="Time Slot">
      <el-date-picker
        v-model="searchForm.date"
        value-format="YYYY-MM-DD"
        type="daterange"
        @change="onSubmit"
        range-separator="To"
        start-placeholder="Start date"
        end-placeholder="End date"
        clearable
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Query</el-button>
    </el-form-item>
  </el-form>
</template>